import React, { useState } from "react";
import classNames from "classnames";
import "./index.less";
import {Tag,NavBar} from '@/ui'
export default function Page(props: any) {
  const { prefixCls = "m-react-pages-tag" } = props;
  const className = classNames({
    [prefixCls]: true,
  });
  const onChangeAction = () => {
    console.log("onChangeAction");
  };
  const onAfterClose = () => {
    console.log("onAfterClose");
  };
  return (
    <div className={className}>
      <NavBar title="Tag" />
      <div className="list">
        <Tag
          small={false}
          disabled={false}
          selected={false}
          onChange={onChangeAction}
        >
          Tag
        </Tag>
      </div>
      <div className="list">
        <Tag
          small={false}
          disabled={true}
          selected={false}
          onChange={onChangeAction}
          color="red"
          activeColor="yellow"
        >
          disabled
        </Tag>
      </div>
      <div className="list">
        <Tag
          small={true}
          disabled={false}
          selected={true}
          onChange={onChangeAction}
          color="red"
          activeColor="pink"
        >
          disabled
        </Tag>
      </div>
      <div className="list">
        <Tag
          small={true}
          disabled={false}
          selected={true}
          onChange={onChangeAction}
          color="red"
          activeColor="pink"
        >
          disableddisabled
        </Tag>
      </div>
      <div className="list">
        <Tag
          small={true}
          disabled={false}
          selected={true}
          onChange={onChangeAction}
          color="red"
          activeColor="pink"
          closable={true}
          afterClose={onAfterClose}
        >
         closeable
        </Tag>
      </div>
      <div className="list">
        <Tag
          small={true}
          disabled={false}
          selected={true}
          onChange={onChangeAction}
          color="red"
          activeColor="pink"
        >
         closeable
        </Tag>
      </div>
    </div>
  );
}
